﻿@page "/menus"

<h3>Menu 导航菜单</h3>

<h4>为页面和功能提供导航的菜单列表。</h4>

<Block Title="顶栏" Introduction="适用广泛的基础用法。" CodeFile="menu.1.txt">
    <Menu Items="@GetItems()" />
</Block>

<Block Title="带图标的顶栏菜单" Introduction="适用简单的网站应用，通过设置菜单项 <code>MenuItem</code> 的 <code>Icon</code> 属性设置菜单图标" CodeFile="menu.2.txt">
    <Menu Items="@GetIconItems()" />
</Block>

<Block Title="侧栏" Introduction="适用于左右结构布局的网站，通过设置 <code>IsVertical</code> 更改导航菜单为侧栏" CodeFile="menu.3.txt">
    <div style="width:220px;">
        <Menu Items="@GetSideMenuItems()" IsVertical="true" style="border-right: 1px solid #e6e6e6;" />
    </div>
</Block>

<Block Title="带图标的侧栏菜单" Introduction="通过设置菜单项 <code>MenuItem</code> 的 <code>Icon</code> 属性设置菜单图标" CodeFile="menu.3.txt">
    <div style="width:220px;">
        <Menu Items="@GetIconSideMenuItems()" IsVertical="true" style="border-right: 1px solid #e6e6e6;" />
    </div>
</Block>

<Block Title="手风琴效果的侧栏" Introduction="通过设置 <code>IsAccordion</code> 属性设置手风琴特效侧栏菜单" CodeFile="menu.4.txt">
    <div style="width:220px;">
        <Menu Items="@GetIconSideMenuItems()" IsVertical="true" IsAccordion="true" style="border-right: 1px solid #e6e6e6;" />
    </div>
</Block>

<AttributeTable Items="@GetAttributes()" />
